<template>
  <ConfigProvider
    :theme="localTheme"
    :locale="zh_CN"
    :componentSize="store.$state.theme.size"
    :direction="store.$state.theme.direction"
    :wave="{
      disabled: !store.$state.theme.wave,
    }"
    :virtual="store.$state.theme.virtual"
    :autoInsertSpaceInButton="store.$state.theme.autoInsertSpaceInButton"
  >
    <template v-if="pageStatus === 'normal'">
      <!-- PC显示 -->
      <Desktop />
      <!-- 移动端 -->
      <PhoneVue />
    </template>
    <template v-else-if="pageStatus === 'maintenance'">
      <Maintenance />
    </template>
  </ConfigProvider>
  <!-- 通用右键菜单 -->
  <Contextmenu />
  <!-- 框选 -->
  <Selection />
</template>

<script setup lang="ts">
import { ConfigProvider, theme } from 'ant-design-vue';
import zh_CN from 'ant-design-vue/es/locale/zh_CN';
import {
  getSettings,
  initialWebsocket,
  loadSystemComponents,
  loadSystemImages,
  screenDetection,
  setAxios,
  setCssVar,
  setEvent,
} from './initialization';
import usePageStore from './store/page';
import Contextmenu from './views/components/contextmenu/Contextmenu.vue';
import Desktop from './views/desktop/Desktop.vue';
import PhoneVue from './views/phone/Phone.vue';
/* 设置Dayjs，用于日期选择 */
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import Maintenance from './Maintenance.vue';
import { pageStatus } from './global/config/websocket';
import { destroyTempWindow } from './global/window/window';
import Selection from './views/selector/selection/Selection.vue';
dayjs.locale('zh-cn');

const { compactAlgorithm, darkAlgorithm, defaultAlgorithm } = theme;
const store = usePageStore();

/* 初始化请求 */
setAxios();
/*  */
nextTick(async () => {
  /* 加载系统的图标 */
  loadSystemImages();
  /* 初始化系统本地组件 */
  loadSystemComponents();
  /* 初始化事件 */
  setEvent();
  /* 设置主题变量 */
  setCssVar();
  /* 屏幕检测 */
  screenDetection();
  /* 初始化websocket */
  initialWebsocket();
  /* 获取版本等参数 */
  getSettings();
});
/* 设置本地主题 */
const localTheme = computed(() => {
  let algorithm = store.$state.theme.algorithm;
  let map = {
    dark: darkAlgorithm,
    compact: compactAlgorithm,
    default: defaultAlgorithm,
  };
  return {
    token: {
      colorPrimary: store.$state.theme.theme,
      borderRadius: store.$state.theme.borderRadius,
      fontSize: store.$state.theme.fontSize,
    },
    algorithm: map[algorithm],
  };
});

onUnmounted(() => {
  /* 清除临时窗口，避免在本地存储过多窗口信息 */
  destroyTempWindow();
});
</script>

<style lang="scss" scoped></style>
